<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
    <el-breadcrumb-item v-for="item in breadcrumbList" :key="item.path" :to="item.path">
      {{ item.name }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { computed } from 'vue'

const route = useRoute()

// 递归获取当前路由的所有父级，生成面包屑
const breadcrumbList = computed(() => {
  // 只取有meta.title的路由
  return route.matched.filter(item => item.meta && item.meta.title).map(item => ({
    name: item.meta.title,
    // 处理 path，确保以/开头
    path: item.path.startsWith('/') ? item.path : '/' + item.path
  }))
})
</script>